<template>
	<div class="view">
		<view class="search-box">
			<view class="warp" @click="selectCity">
				<view>{{ city.title || '选择您的城市' }}</view>
				<image src="/static/images/ic_drop_down.png"></image>
			</view>
			<serachInput class="search-container" @search="search"></serachInput>
		</view>
		<div class="selectBox">
			<div @click="to('/pages/IndexPages/screenPage/main?type=1')">
				<p>按疾病找</p>
				<p>{{ diseasesNumber }}种疾病</p>
			</div>
			<div @click="to('/pages/IndexPages/screenPage/main?type=2')">
				<p>按医院找</p>
				<p>{{ hospitalNumber }}家医院</p>
			</div>
		</div>
		<div class="searchList">
			<div class="title"><span>热门搜索</span></div>
			<div class="Info" v-if="hotList.length > 0">
				<p @click="to('/pages/IndexPages/searchRes/main?keyWord=' + item)" v-for="(item, index) in hotList" :key="index">{{ item }}</p>
			</div>
		</div>
		<div v-if="historyList.length > 0" class="searchList">
			<div class="title">
				<span>历史搜索</span>
				<image @click="deleteBatch()" src="/static/images/ic_delete.png"></image>
			</div>
			<div class="Info">
				<p @click="to('/pages/IndexPages/searchRes/main?keyWord=' + item)" v-for="(item, index) in historyList" :key="index">{{ item }}</p>
			</div>
		</div>
	</div>
</template>

<script>
import serachInput from '@/components/searchInput.vue';
import { getDataSummary, selectUserSearchHistory, deleteBatch, getHomeKeyWord } from '@/apis/request.js';

export default {
	components: {
		serachInput
	},
	data() {
		return {
			city: {
				title: '厦门市',
				id: 350200
			},
			diseasesNumber: 0,
			hospitalNumber: 0,
			hotList: [],
			historyList: []
		};
	},
	onShow() {
		this.historyList = uni.getStorageSync('searchHistory');
		this.city = uni.getStorageSync('city');
		this.getDataSummary();
		this.getHot();
	},
	methods: {
		//选择城市
		selectCity() {
			let that = this;
			uni.navigateTo({
				url: '/pages/IndexPages/ChooseCity/main',
				events: {
					changeCity(data) {
						uni.setStorageSync('city', data);
						that.city = data;
						that.getDataSummary();
						uni.$emit('cityChange', data);
					}
				}
			});
		},
		async getHot() {
			this.hotList = await getHomeKeyWord();
		},
		deleteBatch() {
			uni.removeStorageSync('searchHistory');
			setTimeout(() => {
				this.historyList = [];
				uni.showToast({
					title: '删除成功'
				});
			}, 100);
		},
		to(url) {
			uni.navigateTo({
				url
			});
		},
		search(e) {
			uni.navigateTo({
				url: '/pages/IndexPages/searchRes/main?keyWord=' + e
			});
		},
		async getDataSummary() {
			const data = await getDataSummary({
				cityId: this.city.id
			});
			this.diseasesNumber = data.diseasesNumber;
			this.hospitalNumber = data.hospitalNumber;
		}
	}
};
</script>

<style lang="scss" scoped>
.view {
	background-color: #fff;

	.search-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-shrink: 0;

		.warp {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 20rpx;

			image {
				transition: all 0.3s linear;
				margin-left: 5rpx;
				width: 18rpx;
				height: 12rpx;
			}
		}

		.search-container {
			flex: 1;
		}
	}

	.selectBox {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		div {
			width: 552rpx;
			height: 211rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 30rpx;
			background-size: 100%;
			background-repeat: no-repeat;

			p:nth-child(1) {
				color: #ffffff;
				font-size: 40rpx;
				margin-bottom: 20rpx;
			}

			p:nth-child(2) {
				color: #ffffff;
				font-size: 24rpx;
			}
		}

		div:nth-child(1) {
			background-image: url('../../../static/images/ic_disease.png');
		}

		div:nth-child(2) {
			background-image: url('../../../static/images/ic_hospital_search.png');
		}
	}

	.searchList {
		padding: 30rpx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			span {
				font-size: 30rpx;
				color: #333333;
			}

			image {
				width: 38rpx;
				height: 45rpx;
			}
		}

		.Info {
			display: flex;
			flex-wrap: wrap;
			margin-top: 40rpx;

			p {
				height: 68rpx;
				background: #f1efef;
				border-radius: 34rpx;
				padding: 0rpx 35rpx;
				line-height: 68rpx;
				margin-right: 15rpx;
				color: #333333;
				font-size: 26rpx;
				margin-bottom: 15rpx;
			}
		}
	}

	.searchList:nth-child(2) {
		margin-top: 52rpx;
	}
}
</style>
